<template>
	<view class="unitRegisterOne">
		<f-navbar title="社会单位注册" :iconLeft="true" :isBack="true" @goBack="goBack" />
		<view class="unitRegisterOne-header-state ff-align-items ff-text-center">
			<view class="unitRegisterOne-header-state-box">
				<image class="ff-margin-bottom-6"
					src="https://fire-system.oss-cn-beijing.aliyuncs.com/web/fire-technology/step-1.png" mode="">
				</image>
				<view class="ff-font-12">单位信息</view>
			</view>
			<view class="unitRegisterOne-header-state-line"></view>
			<view class="unitRegisterOne-header-state-box">
				<image class="ff-margin-bottom-6 step-number"
					src="https://fire-system.oss-cn-beijing.aliyuncs.com/web/fire-technology/step-2.png" mode="">
				</image>
				<view class="ff-font-12">管理员信息</view>
			</view>
		</view>
		<view class="unitRegisterOne-content">
			<view class="unitRegisterOne-content-one ff-bg-fff ff-font-14 ff-margin-12 ff-border-radius-10">
				<view class="ff-font-weight-600 ff-font-17 ff-margin-bottom-5">单位信息</view>
				<view class="ff-flex-between ff-border-bottom">
					<view class="unitRegisterOne-content-one-title">社会信用代码</view>
					<view class="ff-text-right">{{unitInfo.organizationCode}}</view>
				</view>
				<view>
					<view class="ff-flex-between ff-border-bottom">
						<view class="unitRegisterOne-content-one-title">单位类型</view>
						<view class="unitRegisterOne-content-one-choice ff-flex ff-text-right" @click="unitTypeClick">
							<view v-if="unitInfo.companyType == ''">请选择</view>
							<view v-else>{{ companyTypeName }}</view>
							<u-icon color="#999" name="arrow-right"></u-icon>
						</view>
					</view>
					<!-- 单位类型弹框 -->
					<u-select v-model="unitType" :safe-area-inset-bottom="true" label-name="macroName"
						value-name="macroCode" @confirm="confirmUnit" :list="unitList"></u-select>
				</view>
				<view class="ff-flex-between ff-border-bottom" v-if="unitInfo.companyType == 4">
					<view class="unitRegisterOne-content-one-title" style="width: 370rpx;">业委会或其他代码（选填）</view>
					<input class="ff-text-right" placeholder="请输入" placeholder-style="color:#999" type="text"
						v-model.trim="unitInfo.communityCode" />
				</view>
				<view>
					<view class="ff-flex-between ff-border-bottom">
						<view class="unitRegisterOne-content-one-title">单位名称</view>
						<view class="unitRegisterOne-content-one-choice ff-flex ff-text-right"
							@click="unitNameTypeClick">
							<view v-if="unitInfo.companyName == ''">请输入</view>
							<view v-else>{{ unitInfo.companyName }}</view>
							<u-icon color="#999" name="arrow-right"></u-icon>
						</view>
					</view>
					<!-- 单位名称搜索弹框 -->
					<u-popup v-model="unitNameType" @close="unitNameClose" mode="bottom" :border-radius="15"
						length="65%" :closeable="true" :mask-close-able="false">
						<view class="unitScroll-but-box"><u-button type="primary" shape="circle"
								@click="unitNoClick">以输入的名称为单位名称</u-button></view>
						<view class="staffRegister-search ff-padding-top-35">
							<view class="staffRegister-search-icon ff-bg-fff">
								<u-search placeholder="请输入单位名称" :height="72" @change="unitNameChange"
									input-align="center" v-model="unitName" :clearabled="false"
									:show-action="false"></u-search>
							</view>
							<scroll-view scroll-y @scrolltolower="unitScroll">
								<view v-if="searchUnitResult" class="staffRegister-search-result ff-bg-fff ff-font-13 ">
									<view v-if="unitNameList.length > 0" class="staffRegister-search-result-box">
										<view :class="unitInfo.companyName == item.companyName ? 'activeName' : ''"
											class="ff-text-center ff-padding-14 ff-line-height-1-2"
											@click="unitNameClick(item, index)" v-for="(item, index) of unitNameList"
											:key="index">
											{{ item.companyName }}
										</view>
									</view>
									<view v-else>
										<view class="ff-color-999 ff-text-center ff-padding-15">查无此单位</view>
									</view>
								</view>

							</scroll-view>
						</view>
					</u-popup>
				</view>
				<view class="ff-flex-between ff-border-bottom">
					<view class="unitRegisterOne-content-one-title">单位注册地址</view>
					<view class="unitRegisterOne-content-one-choice ff-flex ff-text-right" @click="unitRegisterAddress">
						<view v-if="unitInfo.companyAddr == ''">请选择</view>
						<view class="ff-line-height-1-3" v-else>{{ unitInfo.companyAddr }}</view>
						<u-icon color="#999" name="map-fill"></u-icon>
					</view>
				</view>
				<view>
					<view class="ff-flex-between ff-border-bottom">
						<view class="unitRegisterOne-content-one-title">所属区域</view>
						<view class="unitRegisterOne-content-one-choice ff-flex ff-text-right" @click="areaClick">
							<view v-if="areaName == ''">请选择</view>
							<view v-else>{{ areaName }}</view>
							<u-icon color="#999" name="arrow-right"></u-icon>
						</view>
					</view>
					<!-- 所属区域弹框 -->
					<u-select v-model="areaType" :list="areaList" @confirm="confirmArea" mode="mutil-column-auto"
						:safe-area-inset-bottom="true" label-name="areaName" value-name="areaCode"
						child-name="children"></u-select>
				</view>
				<view v-if="unitInfo.areaId != ''">
					<view class="ff-flex-between ff-border-bottom">
						<view class="unitRegisterOne-content-one-title">所属消防救援机构</view>
						<view class="unitRegisterOne-content-one-choice ff-flex ff-text-right" @click="departmentClick">
							<view v-if="departmentName == ''">请选择</view>
							<view v-else>{{ departmentName }}</view>
							<u-icon color="#999" name="arrow-right"></u-icon>
						</view>
					</view>
					<!-- 消防救援机构弹框 -->
					<u-select v-model="departmentType" label-name="departmentName" value-name="id"
						@confirm="confirmDepartment" :list="departmentList"></u-select>
				</view>
				<view class="ff-flex-between ff-border-bottom">
					<view class="unitRegisterOne-content-one-title">实际办公地址</view>
					<view class="unitRegisterOne-content-one-choice ff-flex ff-text-right" @click="ActualOfficeAddress">
						<view v-if="unitInfo.officeAddr == ''">请选择</view>
						<view class="ff-line-height-1-3" v-else>{{ unitInfo.officeAddr }}</view>
						<u-icon color="#999" name="map-fill"></u-icon>
					</view>
				</view>
			</view>
			<view class="unitRegisterOne-content-two ff-bg-fff ff-font-14 ff-margin-12 ff-border-radius-10">
				<view class="ff-flex-between ff-border-bottom">
					<view class="unitRegisterOne-content-one-title">消防安全管理人姓名</view>
					<input class="ff-text-right" placeholder="请输入" placeholder-style="color:#999" type="text"
						v-model.trim="unitInfo.fireManageName" />
				</view>
				<view class="ff-flex-between ff-border-bottom">
					<view class="unitRegisterOne-content-one-title">消防安全管理人手机号</view>
					<input class="ff-text-right" placeholder="请输入" placeholder-style="color:#999" type="number"
						maxlength="11" v-model.trim="unitInfo.fireManagePhone" />
				</view>
				<view class="ff-flex-between ff-border-bottom">
					<view class="unitRegisterOne-content-one-title">消防安全责任人姓名</view>
					<input class="ff-text-right" placeholder="请输入" placeholder-style="color:#999" type="text"
						v-model.trim="unitInfo.fireDutyName" />
				</view>
				<view class="ff-flex-between ff-border-bottom">
					<view class="unitRegisterOne-content-one-title">消防安全责任人手机号</view>
					<input class="ff-text-right" placeholder="请输入" placeholder-style="color:#999" type="number"
						maxlength="11" v-model.trim="unitInfo.fireDutyPhone" />
				</view>
			</view>
			<view class="unitRegisterOne-content-but">
				<view class="unitRegisterOne-content-but-box"><u-button type="primary" shape="circle"
						@click="nextClick">下一步</u-button></view>
			</view>
		</view>
		<!-- 未获取到定位示弹框 -->
		<u-modal v-model="locationModal" title="温馨提示" :content-style="{ 'line-height': '1.5' }"
			content="当前位置获取失败，请您开启GPS定位权限后再试！" />
		<u-modal v-model="infoModal" :show-cancel-button="true" @confirm="confirmInfo" title="温馨提示"
			:content-style="{ 'line-height': '1.5' }" content="退出后, 您填写的内容将不会被保存" />
		<f-loading ref="loading" />
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	export default {
		name: 'unitRegisterOne',
		data() {
			return {
				locationModal: false, // 定位弹框的显/隐
				infoModal: false, // 消息提示弹框的显/隐
				// 单位类型
				unitList: [], // 单位类型列表数据
				unitType: false, // 单位类型显/隐
				// 单位名称
				searchUnitResult: false, // 搜索结果
				unitNameType: false, // 单位类型显/隐
				unitName: '', // 单位名称搜索的内容
				unitNameList: [], // 单位列表
				unitNamePages: {
					current: 1,
					size: 10
				},

				// 所属区域（省市）
				areaList: [], // 所属区域列表数据
				areaType: false, // 所属区域类型显/隐
				areaName: '', // 选中的所属区域
				departmentList: [], // 消防机构列表
				departmentType: false, // 消防机构弹框显/隐
				departmentName: '', // 消防机构选中展示的内容

				// 注册的单位信息
				companyTypeName: '', // 单位类型名字
				unitInfo: {
					isAsd: 1, // 是否来源爱山东0否1是
					organizationCode: '', // 社会信用代码
					companyType: '', // 单位类别(1:消防安全重点单位 2: 一般单位，3-火灾高危单位)
					companyName: '', // 单位名称
					communityCode: '', // 业委会代码或其他代码
					companyAddr: '', // 单位注册地址
					latitude: '', // 单位纬度
					longitude: '', // 单位经度
					areaId: '', // 所属区域Id
					departmentId: '', // 所属消防救援机构id
					deptUnknown: '', // 是否未知:1.未知 0已知(仅用于单位注册)
					officeAddr: '', // 单位实际办公地址
					officeLatitude: '', // 办公地址纬度
					officeLongitude: '', // 办公地址经度
					fireManageName: '', // 消防安全管理人姓名
					fireManagePhone: '', // 消防安全管理人电话
					fireDutyName: '', // 消防安全责任人姓名
					fireDutyPhone: '' // 消防安全责任人电话
				}
			};
		},
		onLoad(e) {
			// console.log('前页面传过来的数据-----', e);
			this.unitInfo.organizationCode = e.socialCode;
			this.unitInfoInitialLenghth = JSON.stringify(this.unitInfo).length; // 初始的数据长度
			this.getUnitList(); // 获取单位列表数据
			this.getAreaList(); // 获取所属区域数据
		},
		methods: {
			// 返回上一层页面
			goBack() {
				if (JSON.stringify(this.unitInfo).length != this.unitInfoInitialLenghth) {
					this.infoModal = true;
				} else {
					this.$pageJump.navigateBack();
				}
			},
			// 返回上一层确认按钮
			confirmInfo() {
				this.$pageJump.navigateBack();
			},
			/* 单位类型系列操作-------------------------------------start */
			// 获取单位列表数据
			async getUnitList() {
				this.$refs.loading.openLoading('加载中···'); // 打开loading动画
				const data = await this.$http.get({
					url: '/sys/macro/catalog/company_type'
				});
				//console.log('请求单位类型列表数据-----', data);
				if (data.code == 200) {
					this.$refs.loading.closeLoading(); // 关闭loading动画
					this.unitList = data.data;
				} else {
					this.$refs.loading.closeLoading(); // 关闭loading动画
					this.$refs.uToast.show({
						title: data.msg,
						type: 'error'
					});
				}
			},
			// 点击显示单位弹框
			unitTypeClick() {
				this.unitType = true;
			},
			// 确定单位类型
			confirmUnit(e) {
				// console.log('单位类型确定的数据----', e);
				this.unitInfo.companyType = e[0].value;
				this.companyTypeName = e[0].label;
				this.unitInfo.companyName = ''; // 清空单位名字
				this.unitName = ''; // 单位名字搜索的内容
			},
			/* 单位类型系列操作-------------------------------------end */

			/* 单位名称系列操作---------------------------------------------start */

			// 上拉加载scroll-view
			unitScroll() {
				this.unitNamePages.current++;
				this.searchUnitList(this.unitName); // 获取单位列表接口
			},
			// 请求单位列表信息
			searchUnitList(name) {
				this.$refs.loading.openLoading('查询中···'); // 打开loading动画
				this.$http
					.post({
						url: '/baseCompanyImport/getPageList',
						data: {
							companyName: name,
							size: this.unitNamePages.size,
							current: this.unitNamePages.current
						}
					})
					.then(res => {
						// console.log('请求单位名称列表-------', res);
						if (res.code == 200) {
							this.searchUnitResult = true; // 搜索的结果状态
							const infoList = res.data.records;
							if (infoList.length == 0 && this.unitNamePages.current == 1) {
								// console.log('首次加载没数据');
								this.unitNameList = [];
							} else if (infoList.length !== 0 && this.unitNamePages.current == 1) {
								// console.log('首次加载有数据');
								this.unitNameList = infoList;
							} else if (infoList.length !== 0 && this.unitNamePages.current > 1) {
								// console.log('上拉加载更多数据');
								this.unitNameList = this.unitNameList.concat(infoList);
							} else if (infoList.length == 0 && this.unitNamePages.current > 1) {
								// console.log('上拉加载没有更多数据了');
								this.$refs.uToast.show({
									title: '没有更多数据了'
								});
							}
						} else {
							this.$refs.uToast.show({
								title: res.msg,
								type: 'error'
							});
						}
						this.$refs.loading.closeLoading(); // 关闭loading动画
					});
			},
			// 点击弹出单位名称搜索弹窗
			unitNameTypeClick() {
				if (this.unitInfo.companyName) {
					this.unitName = this.unitInfo.companyName;
					this.searchUnitList(this.unitInfo.companyName);
				}
				this.unitNameType = true;
			},
			// 模糊查询单位名称
			unitNameChange(e) {
				// console.log('单位名称搜索的字段----', e);
				this.unitNamePages.current = 1;
				if (e.length > 0) {
					this.searchUnitList(e); // 请求社会单位列表接口
				} else {
					this.unitNameList = []; // 社会单位列表
					this.searchUnitResult = false; // 搜索内容
				}
			},
			// 点击选中某一个社会单位名称
			unitNameClick(e) {
				// console.log('选中了某一个单位信息', e, index);
				this.unitInfo.companyName = e.companyName; // 给单位赋值
				this.unitNameType = false; // 隐藏单位搜索弹出框
				this.searchUnitResult = false; // 搜索内容结果
			},
			// 单位名称关闭操作
			unitNameClose() {
				this.unitNameType = false; // 隐藏单位搜索弹出框
				this.searchUnitResult = false; // 搜索内容结果
			},
			// 当没有所输入的单位名称时候
			unitNoClick() {
				if (!this.unitName) {
					this.$refs.uToast.show({
						title: '单位名称不能为空',
						type: 'error'
					});
					return
				}
				this.unitInfo.companyName = this.unitName; // 给单位名称赋值
				this.unitNameType = false; // 隐藏单位搜索弹出框
				this.searchUnitResult = false; // 搜索内容结果
			},

			/* 单位名称系列操作---------------------------------------------end */

			// 单位注册地址
			unitRegisterAddress() {
				let that = this;
				uni.chooseLocation({
					success: function(res) {
						// console.log('获取单位注册地址数据---------', res);
						that.unitInfo.companyAddr = that.$check.emptySpecial(res.address); // 单位注册地址，清除特殊字符
						that.unitInfo.latitude = res.latitude; // 单位纬度
						that.unitInfo.longitude = res.longitude; // 单位经度
					},
					fail(error) {
						// console.log('位置定位失败返回----', error);
						that.locationModal = true;
					}
				});
			},
			// 实际办公地址
			ActualOfficeAddress() {
				let that = this;
				uni.chooseLocation({
					success: function(res) {
						// console.log('获取实际办公地址数据---------', res);
						that.unitInfo.officeAddr = that.$check.emptySpecial(res.address); // 单位注册地址，清除特殊字符
						that.unitInfo.officeLatitude = res.latitude; // 单位纬度
						that.unitInfo.officeLongitude = res.longitude; // 单位经度
					},
					fail(error) {
						// console.log('位置定位失败返回----', error);
						that.locationModal = true;
					}
				});
			},

			/* 所属区域系列操作------------------------------------------------------start */
			// 请求所属区域列表数据，如果遇到children为unifend 则说明数据最后一集children不是null  必须为null
			async getAreaList() {
				this.$refs.loading.openLoading('加载中···'); // 打开loading动画
				const data = await this.$http.get({
					url: '/sys/area/city/370000'
				});
				// console.log('请求所属区域(山东)列表数据-----', data.data);
				if (data.code == 200) {
					let areaData = data.data;
					let area = [{
						areaCode: '370000',
						areaName: '山东省',
						children: []
					}];
					areaData.forEach(res => {
						area[0].children.push({
							areaCode: res.id,
							areaName: res.areaName
						});
					});
					this.areaList = area; // 给所属区域赋值
				} else {
					this.$refs.uToast.show({
						title: data.msg,
						type: 'error'
					});
				}
				this.$refs.loading.closeLoading(); // 打开loading动画
			},
			// 点击打开所属区域的弹框
			areaClick() {
				this.areaType = true;
			},
			// 点击选中的区域
			confirmArea(e) {
				// console.log('选中了某区域----', e);
				this.areaName = e[1].label;
				this.unitInfo.areaId = e[1].value;
				this.getFireDepartmentInfo(this.unitInfo.areaId); // 获取消防机构的数据
			},
			// 请求消防机构的数据列表
			async getFireDepartmentInfo(areaId) {
				const data = await this.$http.post({
					url: `/sys/dept/${areaId}/V2`
				});
				// console.log('消防机构的数据列表---', data);
				if (data.code == 200) {
					this.departmentList = data.data;
				} else {
					this.$refs.uToast.show({
						title: data.msg,
						type: 'error'
					});
				}
			},
			// 点击打开消防救援机构的弹框
			departmentClick() {
				this.departmentType = true;
			},
			// 选中的消防救援机构数据
			confirmDepartment(e) {
				// console.log('选中的消防救援机构数据----', e)
				this.departmentName = e[0].label;
				this.unitInfo.departmentId = e[0].value;
				this.departmentList.filter(res => {
					if (res.departmentName == this.departmentName) {
						this.unitInfo.deptUnknown = res.deptUnknown;
						return;
					}
				});
			},
			// 点击进入下一步操作
			nextClick() {
				if (this.unitInfo.companyType == '') {
					this.$refs.uToast.show({
						title: '请选择单位类型',
						type: 'error'
					});
					return;
				}
				//  
				// if (this.unitInfo.companyType == 4 && this.unitInfo.communityCode == '') {
				// 	this.$refs.uToast.show({
				// 		title: '业委会代码或其他代码',
				// 		type: 'error'
				// 	});
				// 	return;
				// }
				if (this.unitInfo.companyName == '') {
					this.$refs.uToast.show({
						title: '请输入单位名称',
						type: 'error'
					});
					return;
				}
				if (this.unitInfo.companyAddr == '') {
					this.$refs.uToast.show({
						title: '请选择单位注册地址',
						type: 'error'
					});
					return;
				}
				if (this.unitInfo.areaId == '') {
					this.$refs.uToast.show({
						title: '请选择所属区域',
						type: 'error'
					});
					return;
				}
				if (this.unitInfo.departmentId == '') {
					this.$refs.uToast.show({
						title: '请选择所属消防救援机构',
						type: 'error'
					});
					return;
				}
				if (this.unitInfo.officeAddr == '') {
					this.$refs.uToast.show({
						title: '请选择单位实际办公地址',
						type: 'error'
					});
					return;
				}
				if (this.unitInfo.fireManageName == '') {
					this.$refs.uToast.show({
						title: '请输入消防安全管理人姓名',
						type: 'error'
					});
					return;
				}
				if (!this.$check.isMobile(this.unitInfo.fireManagePhone)) {
					this.$refs.uToast.show({
						title: '请输入正确的消防安全管理人电话',
						type: 'error'
					});
					return;
				}
				if (this.unitInfo.fireDutyName == '') {
					this.$refs.uToast.show({
						title: '请输入消防安全责任人姓名',
						type: 'error'
					});
					return;
				}
				if (!this.$check.isMobile(this.unitInfo.fireDutyPhone)) {
					this.$refs.uToast.show({
						title: '请输入正确的消防安全责任人电话',
						type: 'error'
					});
					return;
				}
				this.$pageJump.navigateTo('/pages/loginRegister/register/socialUnit/unit/unitRegisterTwo?unitInfo=' + JSON
					.stringify(this.unitInfo));
			},
			// 点击跳转到登录页面
			LoginClick() {
				this.$pageJump.navigateTo('/pages/loginRegister/login/Login');
			}
		},
		onShareAppMessage() {
			return {
				title: '分享小程序给朋友',
				path: '/pages/homePage/Home'
			};
		}
	};
</script>

<style lang="scss">
	page {
		background-color: #e6f2fe;
	}

	.unitScroll-but-box {
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
		margin: 4% 20% !important;
	}

	@import './components/unitRegisterOne.scss';
</style>